<template>
    <div class="app">
        <nav-header @add="add"></nav-header>
        <nav-main :list="list" @del="del"></nav-main>
        <nav-footer :list="list" @clear="clear"></nav-footer>
    </div>
</template>

<script>
import NavHeader from "@/components/navHeader/NavHeader";
import NavMain from "@/components/navMain/NavMain";
import NavFooter from "@/components/navFooter/NavFooter";
import { defineComponent, ref, computed } from "vue";
import { useStore } from "vuex";
//useStore是一个函数，返回一个store对象，router是全局路由对象，route是当前路由对象
//useRouter也是一个函数，返回一个router对象

//所有的操作都在父组件中完成，子组件只管传递数据
export default defineComponent({
    name: "Home",
    components: {
        NavHeader,
        NavMain,
        NavFooter,
    },
    setup() {
        let store = useStore();
        let list = computed(() => {
            return store.state.list;
        });
        let value = ref("");
        //添加事件
        let add = (val) => {
            console.log(val);
            value.value = val;
            //先判断有没有存在的任务
            let flag = true;
            list.value.map((item) => {
                if (item.title === value.value) {
                    flag = false;
                    alert("任务已存在");
                }
            });
            if (flag) {
                //调用mutation
                store.commit("addTodo", {
                    title: value.value,
                    complete: false,
                });
            }
        };
        //删除事件
        let del = (val) => {
            console.log(val);
            store.commit("delTodo", val);
        };
        //清除已完成
        let clear = (newArr) => {
            store.commit("clear", newArr);
        };
        return {
            add,
            value,
            list,
            del,
            clear,
        };
    },
});
</script>
<style lang="less" scoped>
.app {
    position: absolute;
    left: 30%;
    top: 20px;
}
</style>
